<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<title>果亦鲜管理系统</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<link href="../../css/croppic.css" rel="stylesheet">
<script src="../../jslib/jquery-1.9.1.min.js"></script>
<script src="../../jslib/croppic.min.js"></script>

</head>
<body>
	<h1>单张图片上传测试</h1>
	
	
	<div id="cropContainerModal" style="width:450px;height:350px;border: 1px solid #ccc;position: relative;"></div>
	<input type="text" id="cropOutput" style="width:450px; margin-top:10px; display:block; border: 1px solid #CCC;" />
	
	<script>
			var croppicContainerModalOptions = {
					uploadUrl:'../../imgUploadTest.do',
					cropUrl:'../../imgCropTest.do',
					outputUrlId:'cropOutput',
					modal:true,
					imgEyecandyOpacity:0.4,
					loaderHtml:'<div class="loader bubblingG"><span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div> ',
					onBeforeImgUpload: function(){ console.log('onBeforeImgUpload') },
					onAfterImgUpload: function(){ console.log('onAfterImgUpload') },
					onImgDrag: function(){ console.log('onImgDrag') },
					onImgZoom: function(){ console.log('onImgZoom') },
					onBeforeImgCrop: function(){ console.log('onBeforeImgCrop') },
					onAfterImgCrop:function(){ console.log('onAfterImgCrop') },
					onReset:function(){ console.log('onReset') },
					onError:function(errormessage){ console.log('onError:'+errormessage) }
			}
			var cropContainerModal = new Croppic('cropContainerModal', croppicContainerModalOptions);
	</script>
	
</body>
</html>

